<template>
  <div>
    <el-card shadow="always">
      <!--      <h1 v-show="!loading_question">{{ questions.question.id }} . {{ questions.question.questionName }}</h1>-->
      <h1>{{ this.programData.id }} . {{ this.programData.name }}</h1>

      <!--      <el-skeleton :rows="0" animated v-show="loading_question"/>-->
      <el-tabs v-model="activeName" class="demo-tabs" style="width: 100%;">
        <!-- 题目详细信息 -->
        <el-tab-pane label="题目" name="first" style="width: 100%;">
          <el-divider content-position="left"><strong>题目信息</strong></el-divider>
          <div class="desc-box">
            <p class="desc-p">{{ this.programData.description }}</p>
          </div>
          <el-divider content-position="left"><strong>输入样式</strong></el-divider>
          <div class="desc-box">
            <p class="desc-p">{{ this.programData.inputStyle }}</p>
          </div>
          <el-divider content-position="left"><strong>输出格式</strong></el-divider>
          <div class="desc-box">
            <p class="desc-p">{{ this.programData.outputStyle }}</p>
          </div>
          <el-divider content-position="left"><strong>数据范围</strong></el-divider>
          <div class="desc-box">
            <p class="desc-p">{{ this.programData.dataRange }}</p>
          </div>
          <el-divider content-position="left"><strong>样例输入</strong></el-divider>
          <p v-for="item in JSON.parse(this.programData.inputSample)">{{ item }}</p>
          <el-divider content-position="left"><strong>样例输出</strong></el-divider>
          <p v-for="item in JSON.parse(this.programData.outputSample)">{{ item }}</p>


          <div>
            <el-row>
              <el-col :span="12">
                <Acescript :editor-config="conf"></Acescript>
              </el-col>
              <el-col :span="12">
                <el-row style="min-height: 40px"></el-row>
                <el-card style="height: 300px" shadow="always">
                  <div v-if="lastResult.title===''">
                    <p>当前未提交代码</p>
                  </div>
                  <div v-else>
                    <h3>提交结果</h3>
                    <p>{{ lastResult.title }}</p>
                    <h4>信息</h4>
                    <p>{{ lastResult.message }}</p>
                    <h4>时间</h4>
                    <p>{{ lastResult.time }}ms</p>
                    <h4>内存</h4>
                    <p>{{ lastResult.memory }}KB</p>
                  </div>


                </el-card>
              </el-col>
            </el-row>
          </div>
          <el-row class="empty-row"></el-row>
          <el-button type="success" @click="submit">提交</el-button>
        </el-tab-pane>


      </el-tabs>

    </el-card>
  </div>
</template>

<script>

import {getQueProgramById} from "@/api/question";
import Acescript from '@/components/font/AceEditor.vue'
import {judgeMatchProgram, judgeProgram} from "@/api/judge";

export default {
  name: "Program",
  components: {
    Acescript
  },
  props: {
    questionId: '',
  },
  data() {
    return {
      lastResult: {
        title: '',
      },
      conf: {
        lang: 'java',
        // content:'',
      },
      test: '',
      theme: 'tomorrow_night_blue',
      programData: null,
      activeName: 'first'
    };
  }, methods: {
    submit() {
      let req = {
        code: this.conf.content,
        language: this.conf.lang,
        questionId: this.programData.id
      }
      if (this.$router.currentRoute.name === 'MockMatch') {
        var matchId = localStorage.getItem("matchId");
        let req = {
          code: this.conf.content,
          language: this.conf.lang,
          questionId: this.programData.id,
        }
        judgeMatchProgram(req, matchId).then(res => {
          if (res.code === 200) {
            this.lastResult = res.data
          }
          if (res.data.title === 'Accept') {
            this.$notify({
              title: 'Accept',
              message: '题目通过',
              type: 'success'
            });

            var key='match'+matchId;
            var countS = localStorage.getItem(key);
            if(countS==null){
              countS='1'
              localStorage.setItem(countS)

            }else {
              let count=Number(countS)
              count+=1;
              localStorage.setItem(key,count)
            }

          } if(res.data.title==='Compile Error'){
            this.$notify({
              title: '编译错误',
              message: res.data.message,
              type: 'success'
            });
          } if(res.data.title==='代码在运行过程中发生了一些错误，请检查！'){
            this.$notify({
              title: '代码错误',
              message: res.data.message,
              type: 'success'
            });
          } if(res.data.title==='内存/时间超出限制'){
            this.$notify({
              title: '内存/时间超出限制',
              message: res.data.message,
              type: 'success'
            });
          }
           if(res.data.title==='WrongAnswer'){
            this.$notify({
              title: '解答错误',
              message: res.data.message,
              type: 'success'
            });
          }
        })

        return;
      }else {
        judgeProgram(req).then(res => {


          if (res.code === 200) {
            this.lastResult = res.data
          }
          if (res.data.title === 'Accept') {
            this.$notify({
              title: 'Accept',
              message: '题目通过',
              type: 'success'
            });
          }
          if (res.data.title === 'Accept') {
            this.$notify({
              title: 'Accept',
              message: '题目通过',
              type: 'success'
            });
          } if(res.data.title==='Compile Error'){
            this.$notify({
              title: '编译错误',
              message: res.data.message,
              type: 'success'
            });
          } if(res.data.title==='代码在运行过程中发生了一些错误，请检查！'){
            this.$notify({
              title: '代码错误',
              message: res.data.message,
              type: 'success'
            });
          } if(res.data.title==='内存/时间超出限制'){
            this.$notify({
              title: '内存/时间超出限制',
              message: res.data.message,
              type: 'success'
            });
          }
          if(res.data.title==='WrongAnswer'){
            this.$notify({
              title: '解答错误',
              message: res.data.message,
              type: 'success'
            });
          }

        })
      }

    },
    fetchQuestion() {
      getQueProgramById(this.questionId).then(res => {
        this.programData = res.data
        this.test = JSON.parse(this.programData.inputSample)
        console.log(this.programData.inputSample)
        // this.programData.inputSample=JSON.parse(this.programData.inputSample)
        // this.programData.outputSample=JSON.parse(this.programData.outputSample)

      })
    }
  }, mounted() {
    this.fetchQuestion()
  }
};
</script>

<style scoped>

</style>
